<template>
	<view class="RxUser">
		
		<view class="RxSetting" :style="{marginTop:setting.top+'px',marginLeft:setting.left+'px'}">
			<!-- <uv-search searchIcon="list" bgColor="#0000001f" placeholder="请输入搜索内容"></uv-search> -->
			<view class="menu_btn" :style="{width: setting.left_width+'px',height: setting.left_height+'px'}">
				<view class="arrowleft">
					<uv-icon v-if="userinfo.types === 1" name="list" color="#ffffff" :size="25" @click="settingClick"></uv-icon>
					<uv-icon v-else name="close" color="#ffffff" :size="25" @click="exitLogin"></uv-icon>
				</view>
				<text class="text_box"></text>
				<view class="searchright">
					<uv-icon name="search" color="#ffffff" :size="28" @click="searchClick"></uv-icon>
				</view>
			  </view>
		</view>
		
		<!-- 底图 - 开始 -->
		<view class="RxUser-header-image">
			<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" :fade="true" duration="450"></uv-image>
		</view>
		<!-- 底图 - 结束 -->

		<!-- 用户信息 - 开始  -->
		<view class="RxUser-info-box">
			<view class="rx_userinfo">
				<view class="rx_userinfo_left">
					<view class="rx_userinfo_left_hi">Hi</view>
					<view class="rx_userinfo_left_name">, {{ userinfo.name }}</view>
				</view>
				<view v-if="userinfo.types < 2" class="rx_userinfo_right">{{ userinfo.clinic.clinic }}</view>
				<view v-else class="rx_userinfo_right">{{ userinfo.mobile }}</view>
			</view>
			<view class="rx_userinfo_button">
				<uv-grid :col="userinfo.types === 1?5:4" :border="false" align="center">
					<uv-grid-item v-for="(item,index) in baseList" :key="index" @click="gridClick(item.title)">
						<uv-icon color="#2c9c3c" :name="item.name" :size="60"></uv-icon>
						<text class="grid-text">{{item.title}}</text>
					</uv-grid-item>
				</uv-grid>
			</view>
		</view>
		
		<toggleClinic ref="refTogglrClinic"></toggleClinic>	<!-- 切换诊所 -->
		<scanCode ref="refScanCode"></scanCode>	<!-- 扫码 -->

		<!-- 用户信息 - 结束 -->
		
		<view class="RxUser-line">
			<uv-line></uv-line>
		</view>
		
		<!-- 用户搜索 -->
		<uv-popup ref="searchPopup" mode="top" round="5" safeAreaInsetTop>
			<view class="search_class">
				<view class="search_class_tags">
					<view v-for="item, index in searchRecords" :key="index" class="search_class_tags_info">
						<uv-tags :text="item" plain shape="circle" type="info" @click="searchItemCLick(item)"></uv-tags>
					</view>
				</view>
				
				<uv-search placeholder="请输入搜索内容" v-model="searchContext" :customStyle="{marginTop: '5px',marginBottom: '5px'}" maxlength="11" @search="searchSubmit" @custom="searchSubmit"></uv-search>
			</view>
		</uv-popup>
		
		<!-- 退出登录确认 -->
		<uv-modal ref="exitLoginModal" content='退出登录' align="center" :showCancelButton="true" confirmColor="#2c9c3c" @confirm="confimSubmit"></uv-modal>

	</view>
</template>

<script>
	import toggleClinic from '@/components/RxHomeImage/components/toggleClinic/toggleClinic.vue'
	import scanCode from '@/components/RxHomeImage/components/scanCode/scanCode.vue'
	export default {
		name:"RxHomeImage",
		components: {
			toggleClinic, scanCode
		},
		data() {
			return {
				userinfo: {
					clinic: {clinicId: "", clinicName: ""},
					mobile: "",
					name: "",
					qrcode: 0,
					types: 2,
					userId: ""
				},
				setting: {
					window_width: '',	// 窗口宽度
					window_height: '',	// 窗口高度
					left_width: '79',	// 左侧胶囊大小
					left_height: '27',	// 左侧胶囊高度
					size: '',	// 设置的大小
					left: '',	// 设置的左边界位置
					top: ''		// 设置的上边界位置
				},
				baseList: [],
				searchRecords: [],
				searchContext: ''
			};
		},
		created() {
			var _this = this
			// 获取手机屏幕宽高
			uni.getSystemInfo({
				success(res) {
					_this.setting.window_width = res.windowWidth; // 窗口宽度
					_this.setting.window_height = res.windowHeight; // 窗口高度
				}
			})
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			_this.setting.size = menuButtonInfo.height
			_this.setting.left = _this.setting.window_width - menuButtonInfo.right
			_this.setting.top = menuButtonInfo.top
		},
		mounted() {
			this.userinfo = this.$store.state.userinfo
			console.log('当前用户信息:', this.userinfo)
			if ( this.userinfo.types === 1) {	// 医生
				this.baseList = [{ name: 'shopping-cart', title: '仓库' }, { name: 'share-square', title: '切换' }, { name: 'scan', title: '扫一扫' }, { name: 'bell', title: '用号' }, { name: 'plus-circle', title: '开处方' }]
			}
			if ( this.userinfo.types === 0) {	// 护士
				this.baseList = [{ name: 'empty-address', title: '诊所' }, { name: 'share-square', title: '切换' }, { name: 'scan', title: '扫一扫' }, { name: 'bell', title: '叫号' }]
			}
			if ( this.userinfo.types === 2) {	// 患者
				this.baseList = [{ name: 'empty-address', title: '诊所' }, { name: 'account', title: '关联患者' }, { name: 'bell', title: '拿号' }, { name: 'scan', title: '扫一扫' }]
			}
			if ( this.userinfo.types === 3) {	// 复诊电手
				this.baseList = [{ name: 'empty-address', title: '诊所' }, { name: 'edit-pen', title: '便签' }, { name: 'scan', title: '扫一扫' }]
			}
		},
		methods: {
			exitLogin() {
				this.$refs.exitLoginModal.open()
			},
			confimSubmit() {
				uni.clearStorage()
				uni.reLaunch({
				    url:'/pages/login/login'
				})
			},
			settingClick() {
				// console.log('传值到兄弟组件-点击打开设置')
				uni.$emit('RxMyPopupOpen', { status: true, userinfo: this.userinfo })
			},
			searchSubmit() {
				this.searchRecords.unshift(this.searchContext)
				if (this.searchRecords.length > 10) {
					this.searchRecords.pop()
				}
				this.$store.dispatch('set_search', this.searchRecords)
				this.$emit("searchContext", { data: this.searchContext })
			},
			searchItemCLick(value) {
				this.searchContext = value
			},
			searchClick() {
				try {
					console.log('获取搜索缓存', this.$store.state.search)
					this.searchRecords = this.$store.state.search.slice(0, 10)
				} catch {}
				
				this.$refs.searchPopup.open()
			},
			addRxClick() {
				console.log('弹出新增处方单')
				uni.navigateTo({
					url:'/pages/medic/create_rx/create_rx'
				})
			},
			gridClick(title) {
				if ( title === '诊所' ) {
					uni.navigateTo({
						url: '/pages/utils/relevanceClinic/relevanceClinic'
					})
				}
				if ( title === '便签' ) {
					uni.navigateTo({
						url: '/pages/utils/visitNote/visitNote'
					})
				}
				if ( title === '关联患者' ) {
					uni.navigateTo({
						url: '/pages/utils/relevancePatient/relevancePatient'
					})
				}
				if ( title === '仓库' ) {
					uni.showToast({ title: '功能未开发', icon:'none' })
				}
				if ( title === '用号' ) {
					uni.showToast({ title: '功能未开发', icon:'none' })
				}
				if ( title === '叫号' ) {
					uni.showToast({ title: '功能未开发', icon:'none' })
				}
				if ( title === '拿号' ) {
					uni.showToast({ title: '功能未开发', icon:'none' })
				}
				if ( title === '切换' ) {
					console.log('切换诊所')
					this.$refs.refTogglrClinic.openModel()
				}
				if ( title === '扫一扫' ) {
					console.log('扫码加入诊所')
					this.$refs.refScanCode.scanClick()
				}
				if ( title === '开处方' ) {
					uni.removeStorage({ key: 'create_rx' })
					this.addRxClick()
				}
			}
		}
	}
</script>

<style lang="scss">
	.RxUser {
		
		.RxSetting {
			position: fixed;	// 固定位置
			z-index: 100;
			
			.menu_btn {
				/* 变更为flex布局右对齐 */
			    display: flex;
			    justify-content: flex-end;
				border-radius: 60rpx;
				padding: 2rpx;
			    overflow: hidden;
			    background-color: #0000003f;
			    border: 0.5rpx solid #ffffff54;
				
				
			    .arrowleft {
				    position: absolute;
			  	    top: 52%;
			  	    left: 65%;
				    -webkit-transform: translate(-160%, -50%) !important;
			    }
			 
			    .text_box {
			        width: 1rpx;
			        height: 20px;
			        background-color: #ffffff54;
			        position: absolute;
			        top: 50%;
			        left: 50%;
			        transform: translate(-50%, -50%) !important;
			        -webkit-transform: translate(-50%, -50%) !important;
			    }
				
				.searchright {
					margin-right: 6%;
					margin-top: 0%;
				}
			}
		}

		.RxUser-info-box {
			background: #ffffff;
			padding: 15rpx;
			margin-top: -20rpx;
			position: relative;
			border-radius: 20rpx;

			
			.rx_userinfo {
				display: flex;
				justify-content: space-between;
				
				.rx_userinfo_left {
					display: flex;
					text-align: left;
					
					.rx_userinfo_left_hi {
						font-size: 26px;
						font-weight: bold;
					}
					
					.rx_userinfo_left_name {
						font-size: 18px;
						margin-top: 10rpx;
					}
				}
				
				.rx_userinfo_right {
					text-align: right;
					margin-top: 10rpx;
					color: rgba(0, 0, 0, 0.4);
				}
			}
			
			.rx_userinfo_button {
				padding: 30rpx 0rpx 10rpx 0rpx;
				.grid-text {
					font-size: 14px;
					color: rgba(0, 0, 0, 0.4);
				}
			}
			
		}
		
		.RxUser-line {
			width: 92%;
			margin-bottom: 20rpx;
			margin-left: auto; /* 左侧外边距自动调整为最大值 */
			margin-right: auto;/* 右侧外边距自动调整为最大值 */
		}
		
		.search_class {
			// height: 180px;
			
			.search_class_tags {
				margin-top: 50px;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				
				.search_class_tags_info {
					padding: 8px;
				}
			}
		}
	}
</style>
